<template>
  <div class="container">

    <Category title="游戏">
      <!-- 作用域插槽 ： 
          主要用于数据不在使用者这边，只让使用组件里面的数据，
          但使用者还要改变组件的样式结构，因此需要使用作用域插槽才可以完成。
          scope后的名字可以随意取，意思同形参 -->
      <template scope="felix">
        <!-- {{ felix.games }} -->
        <ul>
          <li v-for="(item, index) in felix.games" :key="index">{{ item }}</li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <!-- 作用域插槽 ： 
          主要用于数据不在使用者这边，在组件这边，只让使用组件里面的数据，
          但使用者还要改变组件的样式结构，因此需要使用作用域插槽才可以完成。-->
      <!-- 在这可以使用es6结构赋值 {games} -->
      <template scope="{games}">
        <!-- {{ games }} -->
        <ol>
          <li style="color:red" v-for="(item, index) in games" :key="index">{{ item }}</li>
        </ol>
      </template>
    </Category>

    <Category title="游戏">
      <!-- 作用域插槽 ： 
          主要用于数据不在使用者这边，只让使用组件里面的数据，
          但使用者还要改变组件的样式结构，因此需要使用作用域插槽才可以完成。 -->
      <!-- 在这可以使用es6结构赋值 {games} -->
      <!-- scope="{games}还可以替换为新语法 slot-scope={games} -->
      <!-- <template scope="{games}"> -->
      <template slot-scope="{games}">
        <!-- {{ games }} -->
        <h4 v-for="(item, index) in games" :key="index">{{ item }}</h4>
      </template>
    </Category>

    <Category title="游戏">
      <!-- 作用域插槽 ： 
          主要用于数据不在使用者这边，只让使用组件里面的数据，
          但使用者还要改变组件的样式结构，因此需要使用作用域插槽才可以完成。 -->
      <!-- 在这可以使用es6结构赋值 {games} -->
      <!-- scope="{games}还可以替换为新语法 slot-scope={games} -->
      <!-- <template scope="{games}"> -->
      <!-- <template v-slot:default="{ games }"> -->
      <!-- 具名插槽v-slot: 可以简写成 # , 例如：#插槽名 -->
      <template #default="{ games }">
        <!-- {{ games }} -->
        <h4 v-for="(item, index) in games" :key="index">{{ item }}</h4>
      </template>
    </Category>

  </div>
</template>

<script>
import Category from "./components/Category.vue"
export default {
  name: "App",

  components: {
    Category,
  }
};
</script>


<style scoped>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}

h4 {
  text-align: center;
}
</style>